<template>
    <div class="shop" >
        <!--<router-link active-class="active" to="/shop/shopList">商店</router-link>-->
        <router-link
                active-class="active"

                :to="{
                    name:'shopList'
                }"
        >商店</router-link>
        <!--<router-link active-class="active" :to="`/shop/payCar?name=${name}&id=2`">购物车</router-link>-->
        <!--<router-link
                active-class="active"
                :to="{
                    path:`/shop/payCar/${name}`,
                }"
        >购物车</router-link>-->
        <router-link
            active-class="active"

            :to="{
                    name:'payCar',
                    params:{
                        name:'zs',
                    },
                    query:{
                        id:21,
                    }
                }"
    >购物车</router-link>


        <router-view></router-view>

    </div>
</template>

<script>
    export default {
        name: 'shopIndex',
        data(){
            return {

            }
        },

        methods:{

        },

        computed:{


        },
        created(){
            console.log('前台被创建啦')
        },
        destroyed(){
            console.log('前台被销毁啦')
        },
        activated(){
            console.log('前台被激活啦')
        },
        deactivated(){
            console.log('前台被失活啦')
        },

        mounted(){
            console.log(
                this.$router,'--------0-----------------',this.$route
            )
        }
    }
</script>

<style>
    .shop>a{
        display: inline-block;
        height: 40px;
        line-height: 40px;
        width: 120px;
        border: #000 1px solid;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
    }
</style>
